.pre-loader {
    /* Size and position */
    font-size: 30px; /* 1em */
    width: 1em;
    height: 1em;
    position: relative;
    margin: 100px auto;

    /* Styles */
    border-radius: 50%;
    background: #123456;
    transform-origin: 50% 250%;
    -webkit-transform-origin: 50% 250%;

    animation: blink 1s steps(1, start) infinite, /* Blink */ counter-clock 8s linear infinite; /* Rotation */
    -webkit-animation: blink 1s steps(1, start) infinite, /* Blink */ counter-clock 8s linear infinite; /* Rotation */

    /* Dots, clockwise */
    box-shadow: 1em 1em #123456, 2em 2em #123456, 1em 3em #123456, 0em 4em #123456, -1em 3em #123456, -2em 2em #123456, -1em 1em #123456;
}

.pre-loader:after {
    /* Size and position */
    content: "";
    width: 3em;
    height: 3em;
    position: absolute;
    left: -1em;
    top: 1em;

    /* Styles */
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);

    background: white; /* Fallback */
    background: rgba(255, 255, 255, 0.6);

}

@keyframes counter-clock {
    to {
        transform: rotate(-360deg);
    }
}

@-webkit-keyframes counter-clock {
    to {
        -webkit-transform: rotate(-360deg);
    }
}

@keyframes blink {
    12.5% {
        background: rgba(18, 52, 86, 0.6);
        box-shadow: 1em 1em #123456, 2em 2em #123456, 1em 3em #123456, 0em 4em #123456, -1em 3em #123456, -2em 2em #123456, -1em 1em #123456;
    }

    25% {
        background: #123456;
        box-shadow: 1em 1em rgba(18, 52, 86, 0.6), 2em 2em #123456, 1em 3em #123456, 0em 4em #123456, -1em 3em #123456, -2em 2em #123456, -1em 1em #123456;
    }

    37.5% {
        background: #123456;
        box-shadow: 1em 1em #123456, 2em 2em rgba(18, 52, 86, 0.6), 1em 3em #123456, 0em 4em #123456, -1em 3em #123456, -2em 2em #123456, -1em 1em #123456;
    }

    50% {
        background: #123456;
        box-shadow: 1em 1em #123456, 2em 2em #123456, 1em 3em rgba(18, 52, 86, 0.6), 0em 4em #123456, -1em 3em #123456, -2em 2em #123456, -1em 1em #123456;
    }

    62.5% {
        background: #123456;
        box-shadow: 1em 1em #123456, 2em 2em #123456, 1em 3em #123456, 0em 4em rgba(18, 52, 86, 0.6), -1em 3em #123456, -2em 2em #123456, -1em 1em #123456;
    }

    75% {
        background: #123456;
        box-shadow: 1em 1em #123456, 2em 2em #123456, 1em 3em #123456, 0em 4em #123456, -1em 3em rgba(18, 52, 86, 0.6), -2em 2em #123456, -1em 1em #123456;
    }

    87.5% {
        background: #123456;
        box-shadow: 1em 1em #123456, 2em 2em #123456, 1em 3em #123456, 0em 4em #123456, -1em 3em #123456, -2em 2em rgba(18, 52, 86, 0.6), -1em 1em #123456;
    }

    100% {
        background: #123456;
        box-shadow: 1em 1em #123456, 2em 2em #123456, 1em 3em #123456, 0em 4em #123456, -1em 3em #123456, -2em 2em #123456, -1em 1em rgba(18, 52, 86, 0.6);
    }
}

@-webkit-keyframes blink {
    12.5% {
        background: rgba(18, 52, 86, 0.6);
        box-shadow: 1em 1em #123456, 2em 2em #123456, 1em 3em #123456, 0em 4em #123456, -1em 3em #123456, -2em 2em #123456, -1em 1em #123456;
    }

    25% {
        background: #123456;
        box-shadow: 1em 1em rgba(18, 52, 86, 0.6), 2em 2em #123456, 1em 3em #123456, 0em 4em #123456, -1em 3em #123456, -2em 2em #123456, -1em 1em #123456;
    }

    37.5% {
        background: #123456;
        box-shadow: 1em 1em #123456, 2em 2em rgba(18, 52, 86, 0.6), 1em 3em #123456, 0em 4em #123456, -1em 3em #123456, -2em 2em #123456, -1em 1em #123456;
    }

    50% {
        background: #123456;
        box-shadow: 1em 1em #123456, 2em 2em #123456, 1em 3em rgba(18, 52, 86, 0.6), 0em 4em #123456, -1em 3em #123456, -2em 2em #123456, -1em 1em #123456;
    }

    62.5% {
        background: #123456;
        box-shadow: 1em 1em #123456, 2em 2em #123456, 1em 3em #123456, 0em 4em rgba(18, 52, 86, 0.6), -1em 3em #123456, -2em 2em #123456, -1em 1em #123456;
    }

    75% {
        background: #123456;
        box-shadow: 1em 1em #123456, 2em 2em #123456, 1em 3em #123456, 0em 4em #123456, -1em 3em rgba(18, 52, 86, 0.6), -2em 2em #123456, -1em 1em #123456;
    }

    87.5% {
        background: #123456;
        box-shadow: 1em 1em #123456, 2em 2em #123456, 1em 3em #123456, 0em 4em #123456, -1em 3em #123456, -2em 2em rgba(18, 52, 86, 0.6), -1em 1em #123456;
    }

    100% {
        background: #123456;
        box-shadow: 1em 1em #123456, 2em 2em #123456, 1em 3em #123456, 0em 4em #123456, -1em 3em #123456, -2em 2em #123456, -1em 1em rgba(18, 52, 86, 0.6);
    }
}

/*--------------*/

#circularG {
    position: relative;
    width: 128px;
    height: 128px
}

.circularG {
    position: absolute;
    background-color: #8A418A;
    width: 29px;
    height: 29px;
    -moz-border-radius: 19px;
    -moz-animation-name: bounce_circularG;
    -moz-animation-duration: 0.8s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: linear;
    -webkit-border-radius: 19px;
    -webkit-animation-name: bounce_circularG;
    -webkit-animation-duration: 0.8s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: linear;
    -ms-border-radius: 19px;
    -ms-animation-name: bounce_circularG;
    -ms-animation-duration: 0.8s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-direction: linear;
    -o-border-radius: 19px;
    -o-animation-name: bounce_circularG;
    -o-animation-duration: 0.8s;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: linear;
    border-radius: 19px;
    animation-name: bounce_circularG;
    animation-duration: 0.8s;
    animation-iteration-count: infinite;
    animation-direction: linear;
}

#circularG_1 {
    left: 0;
    top: 50px;
    -moz-animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
    -ms-animation-delay: 0.3s;
    -o-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

#circularG_2 {
    left: 14px;
    top: 14px;
    -moz-animation-delay: 0.4s;
    -webkit-animation-delay: 0.4s;
    -ms-animation-delay: 0.4s;
    -o-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

#circularG_3 {
    top: 0;
    left: 50px;
    -moz-animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
    -ms-animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

#circularG_4 {
    right: 14px;
    top: 14px;
    -moz-animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
    -ms-animation-delay: 0.6s;
    -o-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

#circularG_5 {
    right: 0;
    top: 50px;
    -moz-animation-delay: 0.7s;
    -webkit-animation-delay: 0.7s;
    -ms-animation-delay: 0.7s;
    -o-animation-delay: 0.7s;
    animation-delay: 0.7s;
}

#circularG_6 {
    right: 14px;
    bottom: 14px;
    -moz-animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
    -ms-animation-delay: 0.8s;
    -o-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

#circularG_7 {
    left: 50px;
    bottom: 0;
    -moz-animation-delay: 0.9s;
    -webkit-animation-delay: 0.9s;
    -ms-animation-delay: 0.9s;
    -o-animation-delay: 0.9s;
    animation-delay: 0.9s;
}

#circularG_8 {
    left: 14px;
    bottom: 14px;
    -moz-animation-delay: 1s;
    -webkit-animation-delay: 1s;
    -ms-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
}

@-moz-keyframes bounce_circularG {
    0% {
        -moz-transform: scale(1)
    }

    100% {
        -moz-transform: scale(.3)
    }

}

@-webkit-keyframes bounce_circularG {
    0% {
        -webkit-transform: scale(1)
    }

    100% {
        -webkit-transform: scale(.3)
    }

}

@-ms-keyframes bounce_circularG {
    0% {
        -ms-transform: scale(1)
    }

    100% {
        -ms-transform: scale(.3)
    }

}

@-o-keyframes bounce_circularG {
    0% {
        -o-transform: scale(1)
    }

    100% {
        -o-transform: scale(.3)
    }

}

@keyframes bounce_circularG {
    0% {
        transform: scale(1)
    }

    100% {
        transform: scale(.3)
    }

}

/*---------------*/
/* Loading Circle */
.ball {
    background-color: rgba(0, 0, 0, 0);
    border: 5px solid rgba(0, 183, 229, 0.9);
    opacity: .9;
    border-top: 5px solid rgba(0, 0, 0, 0);
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-radius: 50px;
    box-shadow: 0 0 35px #2187e7;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    -moz-animation: spin .5s infinite linear;
    -webkit-animation: spin .5s infinite linear;
}

.ball1 {
    background-color: rgba(0, 0, 0, 0);
    border: 5px solid rgba(0, 183, 229, 0.9);
    opacity: .9;
    border-top: 5px solid rgba(0, 0, 0, 0);
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-radius: 50px;
    box-shadow: 0 0 15px #2187e7;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    position: relative;
    top: -50px;
    -moz-animation: spinoff .5s infinite linear;
    -webkit-animation: spinoff .5s infinite linear;
}

@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-moz-keyframes spinoff {
    0% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(-360deg);
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes spinoff {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
    }
}

.scanButton {
    background: url("../img/scanButton2.png") no-repeat;
    border-radius: 15px 15px 15px 15px;
    display: block;
    height: 80px;
    position: relative;
    vertical-align: top;
    width: 100px;
    margin-left: 10px;
}

.checkoutButton {
    background: url("../img/checkout2.png") no-repeat;
    border-radius: 15px 15px 15px 15px;
    display: block;
    height: 80px;
    position: relative;
    vertical-align: top;
    width: 100px;
    margin-left: 10px;
}

.totalPrice {
    background: url("../img/totalLabel.png") no-repeat scroll 0 0 transparent;
    display: inline-block;
    height: 110px;
    vertical-align: top;
    width: 162px;
    margin: 0.5em 0;
    border-radius: 10px;
}

.addProduct {
    background: url("../img/headerPanel.png") no-repeat scroll 0px 0 transparent;
    display: inline-block;
    height: 110px;
    vertical-align: top;
    width: 162px;
}

.headersPanel {
    background: url("../img/headerPanel2.png") no-repeat;
    background-size: 100%;
    height: 292px;
}

.scanButton:hover {
    box-shadow: 0px 0px 17px 6px lightblue;
}

.headerLogo {
    background: url("../img/Smartbuy-logo.png") no-repeat;
    background-size: 100%;
    height: 95px;
    width: 50%;
}

.paypal-logo {
    background-image: url('../img/secure-paypal-logo.jpg');
    width: 150px;
    height: 88px;
}

/* LIST #4 */
.productsList {
    width: 320px;
    font-family: Georgia, Times, serif;
    font-size: 15px;
}

.productsList ul {
    list-style: none;
}

.productsList ul li {
    display: block;
    text-decoration: none;
    color: #000000;
    background-color: #FFFFFF;
    line-height: 30px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #CCCCCC;
    padding-left: 10px;
    cursor: pointer;
}